<template>
  <div id="tab-item-container" @click="switchTab">
    <span class="m-tabbar-item-icon" v-show="selected">
      <slot name="active-icon"></slot>
    </span>
    <span class="m-tabbar-item-icon" v-show="!selected">
      <slot name="deactive-icon"></slot>
    </span>
    <span class="m-tabbar-item-text">
      <slot></slot>
    </span>
  </div>
</template>
<script>
import { defineComponent, ref, computed } from "vue";
import { useStore } from "vuex";
export default defineComponent({
  name: "TabItem",
  props: {
    name: { type: String, required: false, default: "home" },
  },
  setup(props, ctx) {
    console.log(props.name);
    let store = useStore();
    console.log(store.state.currTab);
    let selected = computed(() => {
      return store.state.currTab == props.name;
    });

    let switchTab = ()=>{
      // ctx.emit('tabChanged',props.name)
      store.commit("updateDoubanTab",props.name)
    }
    return {
      selected,
      switchTab
    };
  },
});
</script>
<style lang="scss">
.tab-item-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
}

.m-tabbar-item-text {
  flex:1;
  font-size: 10px;
  display: block;
  text-align: center;
  color: #949494;
}

.m-tabbar-item-icon {
  flex: 1;
  display: block;
  padding-top: 2px;
}
img {
  width: 28px;
  height: 28px;
}
</style>